// 获取DOM元素
var slideshow = document.querySelector('.slideshow');
var item = document.querySelectorAll('.item');
var slideshowList = document.querySelector('.slideshow-list');
var slideshowLi = slideshowList.children;

var serve = document.querySelectorAll('.serve-main');

var small = document.querySelector('.small');
var zhankai = document.querySelector('.zhankai');
var big = document.querySelector('.big');
var bigTitle = document.querySelector('.big-title');
var shouqi = document.querySelector('.shouqi');
var form = document.querySelector('.form');
var text = document.querySelector('#text');
var tel = document.querySelector('#tel');
var btn = document.querySelector('.submit');

var bar = document.getElementsByClassName('bar')[4];

var telBtn = document.querySelector('.tel-btn');
var telNav = document.querySelector('.tel-nav');

// ____________________全屏轮播____________________
var slideshowTimeId = null;
var slideshowTimeId2 = null;
var num = 0;
var count = 0;
// 缓慢动画
function slideshowSlow(dom, target) {
    clearInterval(slideshowTimeId);
    slideshowTimeId = setInterval(function() {
        if (dom.offsetLeft == target) {
            clearInterval(slideshowTimeId);
        } else {
            var speed = (target - dom.offsetLeft) / 15;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            dom.style.left = dom.offsetLeft + speed + 'px';
        }
    }, 20)
}
// 获取ul和li的宽
for (var i = 0; i < slideshowLi.length; i++) {
    slideshowLi[i].style.width = window.innerWidth + 'px';
}
slideshowList.style.width = window.innerWidth * 3 + 'px';
window.onresize = function() {
    for (var i = 0; i < slideshowLi.length; i++) {
        slideshowLi[i].style.width = window.innerWidth + 'px';
        // 使图片随时垂直水平居中
        slideshowLi[i].children[0].style.position = 'absolute';
        slideshowLi[i].children[0].style.top = '50%';
        slideshowLi[i].children[0].style.left = '50%';
        slideshowLi[i].children[0].style.transform = 'translate(-50%, -50%)';
    }
    slideshowList.style.width = window.innerWidth * 3 + 'px';
}

// 自动轮播
function autoPlay() {
    clearInterval(slideshowTimeId2);
    slideshowTimeId2 = setInterval(function() {
        num++;
        count++;
        if (num > item.length - 1) {
            num = 0;
        }
        if (count > slideshowLi.length - 1) {
            slideshowList.style.left = 0;
            count = 1;
        }
        for (var i = 0; i < item.length; i++) {
            item[i].className = 'item';
        }
        item[num].className = 'item on';
        target = count * slideshowLi[0].offsetWidth;
        slideshowSlow(slideshowList, -target);
    }, 8000)
}
autoPlay();
slideshow.onmouseenter = function() {
    clearInterval(slideshowTimeId2);
}
slideshow.onmouseleave = function() {
    autoPlay();
}

// 焦点轮播
for (var i = 0; i < item.length; i++) {
    item[i].index = i;
    item[i].onclick = function() {
        for (var j = 0; j < item.length; j++) {
            item[j].className = 'item';
        }
        this.className = 'item on';
        var target = this.index * slideshowLi[0].offsetWidth;
        slideshowSlow(slideshowList, -target);
        count = this.index;
        num = this.index;
    }
}


// ____________________我们的服务缩放____________________
for (var i = 0; i < serve.length; i++) {
    serve[i].onmouseenter = function() {
        for (var j = 0; j < serve.length; j++) {
            serve[j].className = 'serve-main';
        }
        this.className = 'serve-main serve-ch';
    }
}


// ____________________留言板____________________
// 在指定元素的后面添加元素
function insertAfter(newDom, signDom) {
    // 声明一个变量存储目标元素的父节点
    var prtNode = signDom.parentNode;
    // 当父元素的最后一个子元素等于目标元素时直接添加
    if (prtNode.lastElementChild == signDom) {
        prtNode.appendChild(newDom);
    } else {
        // 否则插入到目标元素的下一个兄弟节点之前
        prtNode.insertBefore(newDom, signDom.nextSibling);
    }
}
// 展开
zhankai.onclick = function() {
    big.style.display = 'block';
    small.style.display = 'none';
}

// 收起
shouqi.onclick = function() {
    big.style.display = 'none';
    small.style.display = 'flex';
}

// 创建输入提示
var tips = document.createElement('p');
tips.style.color = 'red';
tips.style.fontSize = '12px';
tips.style.alignSelf = 'flex-start';
tips.style.paddingLeft = '11px';
var phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
// 输入内容判断
btn.onclick = function() {
    if (text.value == '') {
        text.style.borderColor = 'red';
        tips.innerText = '留言内容不能为空';
        insertAfter(tips, text);
    } else {
        tips.remove();
        text.style.borderColor = '#DCDFE6';
        if (tel.value == '') {
            tel.parentElement.style.borderColor = 'red';
            tips.innerText = '电话不能为空';
            insertAfter(tips, tel.parentElement);
        } else if (!phoneReg.test(tel.value)) {
            tips.innerText = '请输入正确的电话号码';
            insertAfter(tips, tel.parentElement);
        } else {
            tips.remove();
            tel.parentElement.style.borderColor = '#DCDFE6';
        }
    }
}


// ____________________回到顶部____________________
var barTimeID = null;
// 不在顶部时显示
window.onscroll = function() {
    if (document.documentElement.scrollTop > 0) {
        bar.style.display = 'block';
    } else {
        bar.style.display = 'none';
    }
}

// 回到顶部
bar.onclick = function(e) {
    // 事件对象兼容写法
    var e = e || window.event;
    // 阻止默认行为
    e.preventDefault();
    clearInterval(barTimeID);
    barTimeID = setInterval(function() {
        if (document.documentElement.scrollTop > 0) {
            document.documentElement.scrollTop -= 30;
        } else {
            clearInterval(barTimeID);
        }
    }, 1)
}


// ____________________手机导航____________________
telBtn.onmouseenter = function() {
    telBtn.style.backgroundColor = '#ddd';
    telBtn.onclick = function() {
        if (telNav.clientHeight == 0) {
            telNav.style.height = '246px';
            telNav.style.borderTop = '1px solid #e7e7e7';
        }
        if (telNav.clientHeight == 246) {
            telNav.style.height = '0px';
            telNav.style.borderTop = 'none';
        }
    }
}

telBtn.onmouseleave = function() {
    telBtn.style.backgroundColor = 'transparent';
}